<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
</head>
<body>
</body>
<script src="${basePath }/js/echarts-2.1.10/build/dist/echarts.js"></script>
<script type="text/javascript">
var fileLocation ='${basePath }/js/echarts-2.1.10/build/dist';
var isLastOrNow = "${xzhou}";
require.config({
	paths:{ 
	 'echarts': fileLocation
	}
});
//作为入口
require(
[
     'echarts',
	 'echarts/chart/line'
], 
function (ec) {
    var myChart = ec.init(document.getElementById('jiankong-bottom-right'));
    var comparative = [ //环比增长
                    <c:forEach items="${xzhou }" var="data"  varStatus="stat">      
                    {name:'${data.data_date_copy}',value:'${data.comparative}',increaseof:'${data.increaseof}',datamonth:'${data.data_date}'}
                    <c:if test="${!stat.last}">,</c:if>
                    </c:forEach>
                  ];
    var tongbiOrhuanbi = [
                          <c:forEach items="${nowMonth }" var="data"  varStatus="stat">      
                          {name:'${data.data_date_copy}',value:'${data.comparative}',increaseof:'${data.increaseof}',datamonth:'${data.data_date}'}
                          <c:if test="${!stat.last}">,</c:if>
                          </c:forEach>
                          ];
    
    option = {
    		title: {
    	        text : '未来网贷近30日投资金额监控'
    	    },
    	    grid :{
    			x:11,
    			y:30,
    			x2:12,
    			y2:23
    		},
    		tooltip : {
    		    backgroundColor: 'rgba(50,50,50,0.5)',     // 提示背景颜色，默认为透明度为0.7的黑色
    	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    	            type : 'line',         // 默认为直线，可选为：‘line‘ | ‘shadow‘
    	            lineStyle : {          // 直线指示器样式设置
    	                color: '#008acd'
    	            },
    	            crossStyle: {
    	                color: '#008acd'
    	            },
    	            shadowStyle : {                     // 阴影指示器样式设置
    	                color: 'rgba(200,200,200,0.2)'
    	            }
    	        },
    	        trigger: 'axis',
    	        formatter: function (params) {
    	              
    	        	var res = params[0].name+"<br/>";
    	              for (var i = 0; i < comparative.length; i++) {
    	            	  var nowMonthOne = (comparative[i].datamonth).substr(5,2);
    	            if(params[0].name == comparative[i].name &&  comparative[i].value!="" && comparative[i].increaseof!=""){ 
                	         if('${lastOrMonth}'=="last"){
    	            			res+=(parseInt(nowMonthOne)+1)+'月数据'+params[1].value+'万元&nbsp &nbsp &nbsp';
                	            res+=(parseInt(nowMonthOne))+'月数据'+params[0].value+'万元 <br />';                	        	 
                	         }else{
                	        	 res+=(parseInt(nowMonthOne))+'月数据'+params[1].value+'万元&nbsp &nbsp &nbsp';
                 	            res+=(parseInt(nowMonthOne)-1)+'月数据'+params[0].value+'万元 <br />';       
                	         }
                	           // alert( comparative[i].value);
                	            //alert(comparative[i].value=="-");
                				if('${lastOrMonth}'=="now"){
                	            comparative[i].value!="-"? res +=  ' 环比增长 ' + comparative[i].value+'% &nbsp&nbsp &nbsp &nbsp   &nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp' : res +=  ' 环比增长  暂时无数据 <br />' ;
                	             res += '同比增长'+comparative[i].increaseof+'%'
                				}else{
                						tongbiOrhuanbi[i].value!="-"? res +=  ' 环比增长 ' + tongbiOrhuanbi[i].value+'% &nbsp&nbsp &nbsp &nbsp   &nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp' : res +=  ' 环比增长  暂时无数据 <br />' ;
                         	             res += '同比增长'+tongbiOrhuanbi[i].increaseof+'%'
                       					
                					
                				}           
                				
    	            }
            													  }
					if(res.length<10){res+="暂无数据";}
    	              return res;
    	        }
    	        
    	    },
    	    legend: {
    	        data:['当月数据','上月数据'],
    	    	x:'right'//右
    	    },
    	    calculable : true,
    	    xAxis : [
    	        
    	         {
    	            type : 'category',
    	            boundaryGap : false,
	       	       splitNumber:5,
	       	    axisLabel:{
	       	    	fontFamily:'Microsoft YaHei'
	       	       },
    	            axisLine :{
       	        	  show:true,
       	        	 lineStyle : {color:'#CCC',width: 2,type: 'solid'} 
       	        	  
       	          },
       	      
    	            data : 
    	            	
    	            	[
<c:forEach items="${xzhou }" var="data"  varStatus="stat">      
'${data.data_date_copy}'
<c:if test="${!stat.last}">,</c:if>
</c:forEach>
    	                    ]
    	        }
    	    ],
    	    yAxis : [
    	             {
    	    	            type : 'value',
    	    	            axisLabel : {
    	         	            	formatter: function (data){
    	         	            		return "";
    	         	            	},
    	         	            	fontFamily:'微软雅黑'
    	         	            	},
    	         	         axisLine :{
    	         	        	  show:true,
    	         	        	 lineStyle : {color:'#CCC',width: 2,type: 'solid'} 
    	         	        	  
    	         	          }
    	         	        }
    	    ],
    	    series : [
{
	 name:'上月数据',
    type:'line',
    smooth:true,
    symbol:'emptyCircle',
    symbolSize: 4,
   
    /*  itemStyle:{
        normal: {label : {show: false, position: 'top'},color:'#35b1ac',areaStyle: {type: 'default',color:'#D2EFED'}},
       // emphasis:{label:{show:false},color:'#35b1ac'},
        tooltip : {show:true}
        
    },  */
    itemStyle: {normal: {areaStyle: {type: 'default'},color:'#5DF7ED'}},
    emphasis:{linkStyle: {color:'red'}},
   data:[
<c:forEach items="${lastMonth }" var="data"  varStatus="stat">      
${data.volume}
<c:if test="${!stat.last}">,</c:if>
</c:forEach>	
         ]
},
    	        {
    	        	name:'当月数据',
    	            type:'line', 
    	            smooth:true,
    	            symbol:'emptyCircle',
    	            symbolSize: 4,
    	             /* itemStyle:{
                        normal:{label:{show:false},color:'#e86e24',areaStyle: {type: 'default',color:'#DEF0F0'}},
                     //  emphasis:{label:{show:false},color:'#e86e24',areaStyle: {type: 'default',color:'#DEF0F0'}}
                    }, */ 
                    itemStyle: {normal: {areaStyle: {type: 'default',color:'#D1EEEC'},color:'#16A9A1'}},
    	            data:[
<c:forEach items="${nowMonth }" var="data"  varStatus="stat">      
${data.volume}
<c:if test="${!stat.last}">,</c:if>
</c:forEach>
   	                  
   	                  ]
    	        }
    	        
    	    ]
    	};
    	                    
    myChart.setOption(option);  
}  
);  


function detileData(data){
	alert("a");
	return data/10000;
}
</script>
</html>